mjml-inline-links
Advanced tools
Standard Desktop:
Standard Mobile:
Mode hamburger enabled:
The "hamburger" feature only work on mobile device with all iOS mail client, for others mail clients the render is performed on an normal way, the links are displayed inline and the hamburger is not visible.
<mjml>
<mj-body>
<mj-container>
<mj-navbar background-color="#ef6451">
<mj-column width="20%">
<mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
</mj-column>
<mj-column width="80%">
<mj-inline-links base-url="https://mjml.io">
<mj-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-link>
<mj-link href="/try-it-live" color="#ffffff">Try it live</mj-link>
<mj-link href="/templates" color="#ffffff">Templates</mj-link>
<mj-link href="/components" color="#ffffff">Components</mj-link>
<mj-link href="/documentation" color="#ffffff">Documentation</mj-link>
</mj-inline-links>
</mj-column>
</mj-navbar>
</mj-container>
</mj-body>
</mjml>
To display some links horizontally
ico- help to customize the hamburger icon. They only work with the hamburger mode enabled.
| attribute | unit | description | default value |
|---|---|---|---|
| base url | string | base url for children components | n/a |
| hamburger | string | activate the hamburger navigation on mobile if the value is hamburger | n/a |
| align | string | align content left/center/right | center |
| ico-open | ASCII code decimal | char code for a custom open icon (hamburger mode required) | 9776 |
| ico-close | ASCII code decimal | char code for a custom close icon (hamburger mode required) | 8855 |
| ico-padding | px | hamburger icon padding, supports up to 4 parameters (hamburger mode required) | 10px |
| ico-padding-top | px | hamburger icon top offset (hamburger mode required) | 10px |
| ico-padding-right | px | hamburger icon right offset (hamburger mode required) | 10px |
| ico-padding-bottom | px | hamburger icon bottom offset (hamburger mode required) | 10px |
| ico-padding-left | px | hamburger icon left offset (hamburger mode required) | 10px |
| ico-align | string | hamburger icon alignment, left/center/right (hamburger mode required) | center |
| ico-color | color format | hamburger icon color (hamburger mode required) | #000000 |
| ico-font-size | px | hamburger icon size (hamburger mode required) | Ubuntu, Helvetica, Arial, sans-serif |
| ico-font-family | string | hamburger icon font (only on hamburger mode) | 30px |
| ico-text-transform | string | hamburger icon text transformation none/capitalize/uppercase/lowercase (hamburger mode required) | none |
| ico-text-decoration | string | hamburger icon text decoration none/underline/overline/line-through (hamburger mode required) | none |
| ico-line-height | px | hamburger icon line height (hamburger mode required) | 30px |
FAQs
mjml-inline-links
We found that mjml-inline-links demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.